<template>
	<div class="app-container">
		<el-form :model="form"  ref="queryRef" :inline="true" label-width="106px">
			<div class="bgWhite radius8 pb30">
				<div class=" fb fs16 border-bottom pl30 line-64">
					审核信息
				</div>
				<div class="plr30 pt25 pb25">		
					<div>
						<el-form-item label="审核结果" prop="auditStatus">
							<el-radio-group v-model="form.auditStatus">
								<el-radio v-for="dict in auditStatus" :key="dict.value" :label="dict.value"
									:value="dict.value" size="large">
									{{dict.label}}
								</el-radio>
							</el-radio-group>
						</el-form-item>		
						<el-form-item label="审核意见" prop="auditRemark">
							<el-input v-if="type == 0" v-model="form.auditRemark" placeholder="请输入审核意见" clearable class="resetInput"
								style="width: 312px" />
							<div class="color2" v-else>{{form.auditRemark || '无意见'}}</div>	
						</el-form-item>
					</div>
				</div>
				<div class="mb20 pl30 border-bottom pb20 pr30 mt30">
					<span class="fb">原料列表</span>
				</div>
				<div class="p20">
					<el-table :data="list" style="width: 100%;text-align: center;"
						:cell-style="{ textAlign: 'center','line-height':'54px'}"
						:header-cell-style="{ 'text-align': 'center','line-height':'54px','height':'54px!important'  }"
						>
						<el-table-column prop="materialName" label="原材料名称" />
						<el-table-column prop="materialId" label="原材料ID" />
						<el-table-column prop="latestPrice" label="最新价格（元/吨）" />
						<el-table-column prop="submitterName" label="更新时间"/>
						<el-table-column prop="submitterTime" label="更新人" />
					</el-table>
				</div>
				<div class="text-center">
					<el-button v-if="type == 1" type="defaultBtn" @click="closePage" style="height: 32px;width: 70px;">
						关闭
					</el-button>
					<div v-else>
						<el-button type="defaultBtn" @click="updateAuditRecrodStatus" style="height: 32px;width: 70px;">
							确定
						</el-button>
						<el-button  @click="closePage" style="height: 32px;width: 70px;">
							取消
						</el-button>
					</div>
				</div>
			</div>
		</el-form>
		
	</div>
</template>

<script>
	import {
		auditRecrodList,//列表
		updateAuditRecrodStatus,//提交审核
		auditDetails//详情
	} from "@/api/business/cost";
	import {
		resetForm,
	} from '@/utils/ruoyi'//重置
	import * as echarts from 'echarts';
	export default {
		data() {
			return {
				type:0,//1详情
				auditStatus:[
					{
						value:0,
						label:'通过'
					},
					{
						value:1,
						label:'不通过'
					}
				],
				loading: true, // 遮罩层
				total: 0, // 总条数
				queryParams:{
					pageNum:1,
					pageSize:10,
					auditId:''//审核id
				},
				list:[],
				form: {
					id: '',
					auditStatus:0,//审核状态0=审核通过1=不通过
					auditRemark:'',//审核备注
				},
			}
		},
		created() {
			this.queryParams.auditId = this.$route.query.id ? this.$route.query.id : ''
			this.form.id = this.queryParams.auditId
			console.log(this.form.id,'this.form.id')
			this.type = this.$route.query.type ? this.$route.query.type : 0
			if(this.type == 1){
				this.auditDetails()
			}else{
				this.getList()
			}
		},
		methods: {
			// 获取详情
			auditDetails(){
				auditDetails(this.queryParams.auditId).then(res=>{
					this.form.id = this.queryParams.auditId
					this.form.auditStatus = res.data.auditStatus*1
					this.form.auditRemark = res.data.auditRemark
					this.auditStatus = this.auditStatus.splice(this.form.auditStatus,1)
					console.log(this.form.id,'ppppp===========')
					this.getList()
				})
			},
			//关闭页面
			closePage() {
				this.$tab.closePage();
			},
			// 重置
			resetQuery() {
				this.resetForm("queryRef");
			},
			// 获取原材料列表
			getList() {
				this.loading = true;
				auditRecrodList(this.queryParams).then(res => {
					this.list = res.data
					this.total = res.total;
					this.loading = false;
				})
			},
			// 提交审核
			updateAuditRecrodStatus(){
				updateAuditRecrodStatus(this.form).then(res=>{
					this.$modal.msgSuccess('提交成功')
					setTimeout(()=>{
						this.closePage()
					},2000)
				})
			},
			
		}
	}
</script>

<style>
	.avatar-uploader .el-upload {
		background: #F7F8FA;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
		width: 110px;
		height: 110px;
		text-align: center;
		line-height: 22px;
		color: #8c939d;
	}

	.avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}

	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		text-align: center;
	}

	.shopImg {
		width: 110px;
		height: 110px;
	}
</style>